<template>
  <div id="container-box">
    <back-button :top="19" :left="-40"/>
    <empty-box style="height: calc(100vh - 100px);" v-if="!computedData || computedData.length === 0" tip="还没有上传生肉哦~"/>
    <div id="ep-dt-box">
      <div id="item-box" v-for="(item, index) in computedData" :key="item.epRid" @click="openWindow(index)">
        <div class="img-box">
          <img-lazy :src="item.thumbUrl"/>
        </div>
        <div class="img-text">{{ item.number }}</div>
      </div>
      <p id="more" v-if="showMore" @click.stop="getMore">加载更多...</p>
      <edit-window v-if="isEditWindow" ref="editWindow" :memberList="memberList" :indexMax="indexMax" @toLast="toLast" @toNext="toNext"/>
      <view-window v-if="!isEditWindow" ref="viewWindow" :indexMax="indexMax" @toLast="toLast" @toNext="toNext"/>
    </div>
  </div>
</template>

<script>
import {cookedList, rawList} from "@/api/mgEpApi";
import editWindow from "@/components/mgWindow/editWindow.vue";
import viewWindow from "@/components/mgWindow/viewWindow.vue";
import BackButton from "@/components/common/back-button.vue";
import {epShowType} from "@/router/router";
import {mangaMemberByEp} from "@/api/mgApi";

export default {
  name: "mgDt",
  components: {BackButton, editWindow, viewWindow},
  data() {
    return {
      index: 0,
      indexMax: 0,
      data: [],
      page: 0,
      pageData: [],  // 分页数据
      showMore: false,
      computedData: [],
      memberList: []
    }
  },
  computed: {
    isEditWindow() {
      return epShowType === 'edit'
    }
  },
  methods: {
    getMore() {
      this.page++
      this.computedData = [...this.computedData, ...this.pageData[this.page]]
      if (this.computedData.length >= this.data.length) {
        this.showMore = false
      }
    },
    /**
     * 分页
     */
    initData(data) {
      let array = []
      let size = 27;
      let page = 0
      let len = Math.ceil(data.length / size)

      const add = (arr) => {
        for (let i = 0; i < len; i++) {
          let list = arr.slice(page, page + size)
          page = page + size
          array.push(list)
        }
      }
      add(data)
      return array
    },
    async init() {
      let epId = this.$route.query.id;
      let res
      if (this.isEditWindow) {
        // 获取生肉
        res = await rawList(epId);
        // 获取成员
        mangaMemberByEp(epId).then(res => {
          this.memberList = res.data
        })
      } else {
        // 获取熟肉
        res = await cookedList(epId);
      }
      if (res.code === '200') {
        this.data = res.data
        this.indexMax = this.data.length - 1
        this.pageData = this.initData(res.data)
        this.computedData = this.pageData[this.page]
        if (this.pageData.length > 1) {
          this.showMore = true
        }
      }
    },
    /**
     * 打开漫画视图窗口
     * @param index
     */
    openWindow(index) {
      this.index = index
      if (this.isEditWindow) {
        this.$refs.editWindow.openWindow(index, this.data[index])
      } else {
        this.$refs.viewWindow.openWindow(index, this.data[index])
      }
    },
    /**
     * 下一页
     */
    toNext() {
      let index = Math.min(this.index + 1, this.data.length)
      this.index = index
      if (this.isEditWindow) {
        this.$refs.editWindow.flashData(index, this.data[index])
      } else {
        this.$refs.viewWindow.flashData(index, this.data[index])
      }
    },
    /**
     * 上一页
     */
    toLast() {
      let index = Math.max(this.index - 1, 0)
      this.index = index
      if (this.isEditWindow) {
        this.$refs.editWindow.flashData(index, this.data[index])
      } else {
        this.$refs.viewWindow.flashData(index, this.data[index])
      }
    },
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped lang="scss">
@import url("@/scss/mgEpDt.scss");
</style>